<template lang="pug">
  v-list
    v-list-item.px-0(v-for="bundle in bundles" :key="bundle.id")
      v-list-item-content
        v-card(outlined)
          v-toolbar()
            v-toolbar-title {{bundle.name}}
            v-spacer
            v-label 出库日期：{{bundle.rental_out_at || "-"}} &nbsp; | &nbsp;
            v-label 入库日期：{{bundle.return_at || "-"}} &nbsp; | &nbsp;
            v-btn(icon @click="deleteBundle(bundle)")
              v-icon delete
          v-card-text
            v-row.px-4
              v-spacer
              v-col(cols="2")
                v-text-field(label="价格" dense=true type="number" v-model="bundle.amount")
            v-data-table( :headers="OrderBundleItemsDataTableDef.headers"
              :items="bundle.items"
              hide-default-footer=true
              loading-text="数据加载中..."
              no-data-text="未找到数据"
            )

</template>

<script lang="ts">
  import Vue, {VueConstructor} from 'vue'
  import {mapMutations, mapState} from 'vuex'
  import {Asset} from '@/store/modules/types/Asset'
  import {AssetStock} from '@/store/modules/types/AssetStock'
  import {AssetTypes, getLabelByKey, Item, OrderBundle, WithId} from '@/store/modules/types/Bundle'
  import {OrderBundleItemsDataTableDef} from '@/store/modules/types/Order'

  function convertBundleItems(items: Item[]): OrderDisplayItem[] {
    return items
        .filter(item => item.isSelected === true && item.selected != undefined)
        .map((item: Item) => {
          let selectedItem = item.data[item.selected] as Asset | AssetStock
          let type = getLabelByKey(AssetTypes, selectedItem.type)
          let orderDisplayItem: OrderDisplayItem = {
            assetType: type,
            id: selectedItem.id,
            name: selectedItem.name,
            quantity: item.criteria.quantity
          }
          return orderDisplayItem
        })
  }

  function convertBundle(orderBundles: OrderBundle[]): Bundle[] {
    return orderBundles.map((orderBundle: OrderBundle, index: number) => {
      let items = convertBundleItems(orderBundle.items)
      // let amount = get(orderBundle, 'amount', 0)
      let bundle: Bundle = {
        id: orderBundle.id,
        name: orderBundle.name,
        items: items,
        amount: orderBundle.amount!
      }
      return bundle
    })
  }

  interface Bundle extends WithId {
    name: string;
    amount: number;
    items: OrderDisplayItem[];
  }

  interface OrderDisplayItem extends WithId {
    name: string;
    quantity: number;
    assetType: string;
  }

  export default (Vue as VueConstructor<Vue & {
    $confirm: (opt: any) => Promise<any>
  }>).extend({
    name: 'order_bundles',
    methods: {
      ...mapMutations('order', ['removeBundle', 'updateBundleAmount']),
      onBundleFeeChange(bundle: Bundle) {
        this.updateBundleAmount({id: bundle.id, amount: bundle.amount})
      },
      deleteBundle(bundle: Bundle) {
        this.$confirm({
          body: `确认删除组合 ${bundle.name}？`
        }).then(() => {
          this.removeBundle(bundle.id)
        })
      }
    },
    computed: {
      ...mapState('order', ['orderBundlesClone']),
      bundles(): Bundle[] {
        return this.orderBundlesClone
      },
    },
    data() {
      return {
        OrderBundleItemsDataTableDef
      }
    }
  })
</script>